<template>
  <div class="tabelContent">
    <el-table
      border
      highlight-current-row
      :data="data"
      style="width: 100%"
      @select="select"
      @selection-change="selectedChange"
      @select-all="selectAll"
    >
      <template v-for="(item, index) in head" :key="index">
        <!-- 列前面的序号 -->
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="60"
          v-if="item.showIndex"
        />

        <!-- 显示勾选框 -->
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          type="selection"
          width="60px"
          align="center"
          v-if="item.selected"
        />

        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-if="!item.selected && !item.showIndex"
          align="center"
        />
      </template>

      <!--el-table中 更改表格无数据的时候的默认数据  可以添加属性：empty-text="暂无数据"   或者用下面的插槽 -->
      <template #empty>
        <span>暂无数据</span>
      </template>
    </el-table>
  </div>
</template>
  
<script setup>
import {
  reactive,
  toRefs,
  onMounted,
  nextTick,
  defineExpose,
  defineProps,
  ref,
  defineEmits
} from "vue";

const props = defineProps({
  //子组件接收父组件传递过来的值相当于vue2里面的props
  head: "",
  data: "",
});

// 子组件像父组件传值的方法   相当于vue2里面的this.$emit
const emit = defineEmits();

const tsss = () => {
  console.log("子组件向父组件传值");
};

const select = (selection, row) => {
  emit("select", selection, row);
};

const selectedChange = (row) => {
  emit("selectedChange", row);
};

const selectAll = (selection) => {
  emit("selectAll", selection);
};

const childString = ref("测试调用子组件的数据");

// 4. 明确暴露给父组件的属性和方法
defineExpose({
  tsss,
  childString,
});
</script>
  
  
<style lang="scss" scoped>
.tabelContent {
  padding: 50px;
}

:deep(.cell) {
  text-align: center;
  // overflow: hidden;
  // text-overflow: ellipsis
}

.pagination-row {
  margin-top: 20px;

  .pagination-count {
    color: #666;
    float: left;
    padding-top: 20px;
    font-size: 13px;
  }

  .pagination {
    padding-top: 20px;
    float: right;

    .btn-prev {
      padding: 0 5px !important;
    }

    .btn-next {
      padding: 0 5px !important;
    }
  }
}

:deep(.el-table--scrollable-x .el-table__body-wrapper) {
  overflow-x: hidden;
}

.el-table {
  font-family: Microsoft YaHei;

  :deep(.disabledCheck > .cell .el-checkbox__inner) {
    display: none !important;
  }

  :deep(th) {
    background: #f6f6f8 !important;
    font-weight: 400 !important;
    font-family: MicrosoftYaHei !important;
    font-weight: bold !important;
    color: #333333 !important;
    font-size: 12px !important;
    border-left: solid 1px #e9edf7 !important;
    border-right: solid 1px #e9edf7;
    border-bottom: solid 1px #e9edf7;
    // text-align: center;
    height: 33px !important;
    padding: 0px !important;
    // font-family: Microsoft YaHei;
  }

  :deep(td) {
    color: #666666 !important;
    font-size: 12px !important;
    padding: 0px !important;
    border-bottom: solid 1px #e9edf7;
    border-left: solid 1px #e9edf7 !important;
    border-right: solid 1px #e9edf7;

    // text-align: center;
    height: 37px !important;
    border-right: 0 !important;
    font-family: Microsoft YaHei !important;
  }
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: #f8fbfd;
}

:deep(.el-table__row:hover > td) {
  background: #e8f2ff !important;
}

:deep(.el-table__body tr.current-row > td) {
  background: #e8f2ff !important;
}

:deep(.el-table__fixed-body-wrapper) {
  top: 33px !important;
}

:deep(.el-table__body-wrapper) {
  height: calc(100% - 33px) !important;
  overflow: auto;
}
</style>